<template>
  <div>
    <el-container>
      <!-- 表格 -->
      <el-main>
        <el-button @click="handleAdd">添加</el-button>
        <el-table
          :data="
            tableData.slice(
              (currentPage1 - 1) * PageSize,
              PageSize * currentPage1
            )
          "
          style="width: 100%"
        >
          <el-table-column label="编号" width="180">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.sex }}</span>
            </template>
          </el-table-column>
          <el-table-column label="年龄" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.age }}</span>
            </template>
          </el-table-column>
          <el-table-column label="籍贯" width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.selectedAddress }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.selectedAddress }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="QQ" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.qq }}</span>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.Email }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <personDialog ref="personDialog" @getFormData="setFormData" :formDataModel="formData" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
//这就是一个组件，新建组件的基础格式就这样就可以了，在这个里面添加东西
import personDialog from '@/components/dialog'
export default {
  name: "",
  components:{
        personDialog,
  },
  data() {
    return {
      tableData: [],
      currentPage1: 1,
      PageSize: 3,
      isEdit: false,
      editTableIndex:0,
      bnt_num: 0,
      totalCount: 1,
      input3: "",
      formData:null//用来接收子组件传递的值
    };
  },
  methods: {
    //在这里把子组件传递给父组件的值获取到，并且保存到当前组件
    setFormData(val){
      //结构的方式避免引用传递
      // this.formData={...val}
      if(!this.isEdit){
          this.tableData.push({...val});
      }
      else {
          //this.tableData[this.editTableIndex]={...val}
          this.$set(this.tableData, this.editTableIndex, {...val});
      }
  
     
    },
    //首先分析：
    //编辑时我们是不是需要把值传到子组件dialog中的表单，才能显示
    //编辑主要就是回显数据嘛，那么这个时候就涉及到：父组件向子组件传值
    //回想，父组件向子组件传值用props
    //所以第一步：在子组件中建对应的props属性，用来接收父组件传过去的值
    handleEdit: function (index, row) {
      this.isEdit=true;
      this.editTableIndex=index;
      //首先我们获取到数据之后，给赋值给我们子组件属性绑定的变量，这样就达到把父组件的数据传递到子组件的目的了
      this.formData = { ...row };
      //然后把子组件打开
      this.$refs.personDialog.dialogFormVisible=true;
      // console.log(row.name);
      // // console.log(row.sex)
      // this.isEdit=true;
      // this.bnt_num = this.PageSize * (this.currentPage1 - 1) + index;
      // console.log(index);
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    handleAdd(){
      this.isEdit=false;
      this.$refs.personDialog.dialogFormVisible=true;
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>